<template>
    <div class="form-container">
        <h2>Enter your information</h2>
        <label for="name">Name:{{ person.name }}</label>
        <input v-model="person.name" type="text" id="name">

        <label for="age">Age:{{ person.age }}</label>
        <input v-model="person.age" type="number" id="age">

        <p>Your name is {{ person.name }} and you are {{ person.age }} years old.</p>
    </div>
</template>

<script setup lang='ts'>
import { reactive } from 'vue';


// interface Person{
//     name:string,
//     age:number
// }

const person = reactive({
    name:"abc",age:18
})

</script>

<style scoped>
.form-container {
    margin: 20px;
}

input {
    display: block;
    margin: 10px 0;
    padding: 5px;
}

label {
    font-weight: bold;
}

p {
    margin-top: 20px;
    font-size: 1.2em;
}
</style>